<!DOCTYPE html>
<html>
<head>
	<title>事件冒泡</title>
</head>
<style>
#parent{
	width: 400px;
	height: 400px;
	background: #f8D5Ff;
}
#child{
	width: 150px;
	height: 150px;
	background: #000;
}
</style>
<!-- 
事件冒泡：从内层触发事件的元素开始，向外层传递事件、在传递过程中，相同的事件会被触发。
(元素、事件，由内而外，触发相同)
window, document, 
!!（两个叹号）强制转换成布尔值

 -->
<body>
	<div id="parent">
		<div id="child"></div>
	</div>
</body>
<script type="text/javascript">
var div1 = document.getElementById("parent");
var div2 = document.getElementById("child");
var arr = [0,2,3,4];
for (var i = 0; i < arr.length; i++) {
	if (!!arr[i]==true) {
		console.log(false);
	}else{
		console.log(true);
	}
}

// div1.onclick=function(){
// 	console.log("父级")
// }
// div2.onclick = function(){
// 	console.log("子级");
// }
// div2.onclick=function(e){
// 	if (e.target.id=="child") {//是获取id吗
// 		console.log("child");
// 	}else{
// 		console.log("parent");
// 	}
// }
div2.onclick=function(e){//e事件对象
	console.log("child");
	e.stopPropagation();//阻止事件冒泡
}
div1.onclick=function(){
	console.log("parent");
}

</script>
</html>